
<template>
	<div id="admin-adduser">
		
		<el-form
		:model="Registered"  
		status-icon  
		ref="loginInfo" 
		class="demo-ruleForm"
		style="zoom:1.3"
		>
		<Title style="float: left;">添加用户</Title>
		<el-form-item style="float: right;">
			<el-button @click="addOne()">+1</el-button>
			<el-button @click="submitForm(Registered)">提交</el-button>
		</el-form-item>
		
			<el-form-item style="clear: both;"
			prop="uPassword"
			:rules="PassRule"
			>
				<el-input 
				:class="isshake"  
				type="password" 
				v-model="Registered.uPassword"  
				autocomplete="off"
				@keyup.native.enter="changeFocus('name0')"
				placeholder="默认密码"
				show-password
				></el-input>
			</el-form-item>
			<el-form-item 
			v-for="(i,index) in Registered.uAccounts"
			:prop="'uAccounts['+index+'].value'"
			:rules="UAccountRule"
			>
				<el-input 
				:class="isshake" 
				type="text" 
				v-model="i.value"  
				autocomplete="off"  
				:placeholder="'账号'+index"
				:ref="'name'+index"
				@keyup.native.enter="changeFocus('name'+(index+1))"
				></el-input>
				<el-button @click="delOne(index)">-</el-button>
			</el-form-item>
			
			
		</el-form>
	</div>
</template>

<script>
import { Toast } from 'vant'
export default{
	name:'LoginMain',
	data(){		
		const VPass = (rule,value,callback)=>{
			// console.log(value)
			if(value === "")
				callback(new Error('请输入密码'))
			else if(!/^.{6,13}$|^123$/.test(value))
				callback(new Error('密码不符合规范'));
			else if(this.Registered.uAccounts.length === 0)
				callback(new Error('请至少添加一条账号'));
			callback();
		};
		const VName = (rule,value,callback)=>{
			// console.log(value)
			if(value === "")
				callback(new Error('请输入账号'))
			else if(!/^\d{6,13}$|^123$/.test(value))
				callback(new Error('账号不符合规范'));
			else{
				let count = 0
				this.Registered.uAccounts.forEach(e=>{
					if(e.value === value) count+=1
					if(count >= 2)
							callback(new Error('账号重复'));
							// callback();
				})
			}
			callback();
		};
		return{
			isshake:'',
			Registered:{
				uAccounts:[
					{value:""},
				],
				uPassword:"",
			},
			PassRule:[
				{validator:VPass,trigger:'blur'}
			],
			UAccountRule:[
				{validator:VName,trigger:'blur'}
			]
		}
	},
	methods:{
		delOne(index){
			this.Registered.uAccounts.splice(index,1)
		},
		addOne(){
			this.Registered.uAccounts.push({value:""})
		},
		changeFocus(e) {
			try{
				this.$refs[e][0].focus()
			}catch(error){//最后一个了
				this.addOne()
				setTimeout(()=>{
					this.$refs[e][0].focus()
				},500)//需要一点反应时间
				
			}
		    
		},
		submitForm(data){
			this.$refs['loginInfo'].validate(isOk => {
				if(!isOk)//表单校验失败
				{
					// alert("error")
					// return;
					this.isshake = "shakeThe"
					setTimeout(()=>{
						this.isshake = ""
					},300)
				}
				else//表单校验成功
				{
					axios.post('./api/Authentication',{
						data:this.$store.state.login
					}).then(a=>{
						if(!a.data.isOk)
						{
							this.$message.error(a.data.data)
						}else{
							this.$message({message: a.data.data,type: 'success'});
							axios.post('./api/doReg', {
								data:this.Registered
								})
								.then(a=>{//成功到后端
									for(let info of a.data.data) 
			// data[Symbol.iterator]
			//有点问题
										setTimeout(()=>{
											this.$message({
												message:info.info ,
												type: info.type,
												duration:info.type=="warning"? 0:3000,
												showClose:true
											});
										},500)
									setTimeout(()=>{this.$message({message: "执行完毕",type: 'success'});},1000)
									// console.log(a.data.data)
									// console.log(JSON.parse(a.data))
									// if(!a.data.isOk)
									// {
									// 	this.$message.error(a.data.data)
									// }else{
									// 	this.$message({message: a.data.data,type: 'success'});
									// }
								})
								.catch(e=>{ console.log(e)
									this.$message({ message: '服务器异常',type: 'warning'}); })
						}
					}).catch(e=>{ this.$message({ message: '服务器异常',type: 'warning' }); })
				}
			});
			}
		},
}
</script>

<style lang="scss" scoped>
#admin-adduser{
	.el-form-item__content{
		display: flex;
		.shakeThe{
			animation: shakeThe 0.1S 3;
		}
	}
}

@keyframes shakeThe{
	25%{
		transform: translate(2px,0px);
	}
	75%{
		transform: translate(-2px,0px);
	}
	100%{
		transform: translate(0px,0px);
	}
}
	
</style>
